<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>组件的生命周期</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<!--使用组件-->
<hello-world message='hello world'></hello-world>

<template id="hw-template">
    <!-- 组件的样式，只对 template 内部的标签有效 -->
    <style>
        p {
            padding: 10px;
            background: #f40;
            color: #fff;
        }
    </style>
    <p>Hello World</p>
</template>
<script>
    class HelloWorld extends HTMLElement {
        constructor() {
            //继承的构造函数中必须手动调用super()函数
            super();
            //得到组件的模板内容
            const templateContent = document.querySelector('#hw-template').content;
            //创建组件的根元素：影子DOM节点
            const shadowRoot = this.attachShadow({mode: 'open'});
            //将模板节点添加到影子DOM节点中
            shadowRoot.appendChild(templateContent.cloneNode(true));
        }

        connectedCallback() {
            //当 custom element 首次被插入文档DOM时被调用
            //建议在这里发送数据请求
            console.log('connectedCallback')
        }

        disconnectedCallback() {
            //当 custom element 从文档DOM中删除时被调用
            console.log('disconnectedCallback')
        }

        adoptedCallback() {
            //当 custom element 被移动到新的文档时被调用
            console.log('adoptedCallback')
        }

        attributeChangedCallback() {
            //当 custom element 增加、删除、修改自身属性时被调用
            console.log('attributeChangedCallback', this.getAttribute('message'))
        }
    }

    customElements.define('hello-world', HelloWorld);
</script>
</body>

</html>
